<template>
  <div class="w-full min-h-screen bg-gray-50 relative">
    <!-- 导航栏 -->
    <div class="bg-white border-b border-gray-100">
      <div class="flex items-center justify-between px-4 py-3">
        <div class="flex items-center">
          <button @click="$router.back()" class="mr-4 text-gray-600">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1 class="text-lg font-semibold text-gray-800">离线缓存</h1>
        </div>
        <button class="text-blue-600 text-sm font-medium">管理</button>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="px-4 py-6 pb-20">
      <!-- 缓存状态卡片 -->
      <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div class="flex items-center justify-between mb-3">
          <h3 class="font-semibold text-gray-800">缓存状态</h3>
          <span class="text-sm text-gray-500">已缓存 3 个视频</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
          <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
        </div>
        <p class="text-sm text-gray-600">可用存储空间：2.3GB / 4GB</p>
      </div>

      <!-- 缓存列表 -->
      <div class="space-y-4">
        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
          <div class="flex p-4">
            <div
              class="w-20 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg mr-3 flex-shrink-0 relative overflow-hidden"
            >
              <img
                src="https://images.unsplash.com/photo-1489599663-1d39392b7f6f?w=200&h=300&fit=crop"
                class="w-full h-full object-cover"
                alt="剧集封面"
              />
              <div class="absolute top-1 right-1 bg-green-500 text-white text-xs px-1 rounded">已缓存</div>
            </div>
            <div class="flex-1 min-w-0">
              <h4 class="font-medium text-gray-800 mb-1">说我偏心，全家大鱼大肉过荒年</h4>
              <p class="text-sm text-gray-600 mb-2">已观看至第5集 · 全75集</p>
              <div class="flex items-center justify-between">
                <span class="text-sm text-gray-500">缓存大小：1.2GB</span>
                <button class="text-red-600 text-sm hover:text-red-700">删除</button>
              </div>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
          <div class="flex p-4">
            <div
              class="w-20 h-24 bg-gradient-to-br from-green-500 to-teal-600 rounded-lg mr-3 flex-shrink-0 relative overflow-hidden"
            >
              <img
                src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=300&fit=crop"
                class="w-full h-full object-cover"
                alt="剧集封面"
              />
              <div class="absolute top-1 right-1 bg-yellow-500 text-white text-xs px-1 rounded">缓存中 65%</div>
            </div>
            <div class="flex-1 min-w-0">
              <h4 class="font-medium text-gray-800 mb-1">仙界第一纨绔</h4>
              <p class="text-sm text-gray-600 mb-2">第1集 · 全60集</p>
              <div class="flex items-center justify-between">
                <span class="text-sm text-gray-500">缓存大小：800MB</span>
                <button class="text-blue-600 text-sm hover:text-blue-700">暂停</button>
              </div>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
          <div class="flex p-4">
            <div
              class="w-20 h-24 bg-gradient-to-br from-red-500 to-pink-600 rounded-lg mr-3 flex-shrink-0 relative overflow-hidden"
            >
              <img
                src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=200&h=300&fit=crop"
                class="w-full h-full object-cover"
                alt="剧集封面"
              />
              <div class="absolute top-1 right-1 bg-gray-500 text-white text-xs px-1 rounded">等待中</div>
            </div>
            <div class="flex-1 min-w-0">
              <h4 class="font-medium text-gray-800 mb-1">都市修仙传</h4>
              <p class="text-sm text-gray-600 mb-2">第1集 · 全45集</p>
              <div class="flex items-center justify-between">
                <span class="text-sm text-gray-500">预计大小：650MB</span>
                <button class="text-green-600 text-sm hover:text-green-700">开始</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="false" class="text-center py-12">
        <i class="fas fa-download text-gray-300 text-4xl mb-4"></i>
        <h3 class="text-gray-500 font-medium mb-2">暂无缓存内容</h3>
        <p class="text-gray-400 text-sm">去首页发现更多精彩内容吧</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const cachedVideos = ref([
  {
    id: 1,
    title: '说我偏心，全家大鱼大肉过荒年',
    cover: 'https://images.unsplash.com/photo-1489599663-1d39392b7f6f?w=200&h=300&fit=crop',
    progress: '已观看至第5集',
    total: '全75集',
    size: '1.2GB',
    status: 'cached'
  },
  {
    id: 2,
    title: '仙界第一纨绔',
    cover: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=300&fit=crop',
    progress: '第1集',
    total: '全60集',
    size: '800MB',
    status: 'caching',
    progressPercent: 65
  },
  {
    id: 3,
    title: '都市修仙传',
    cover: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=200&h=300&fit=crop',
    progress: '第1集',
    total: '全45集',
    size: '预计650MB',
    status: 'waiting'
  }
])
</script>

<style scoped>
/* 页面特定样式 */
</style>
